import React from 'react'
import styles from './index.module.css'

const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '价格', type: 'price' },
  { title: '筛选', type: 'more' }
]

export default function FilterTitle({ titleSelectedStatus, onClick }) {
  return (
    <div className={styles.root}>
      {titleList.map(item => {
        const isSelect = titleSelectedStatus[item.type]
        return (
          <div className={styles.item} key={item.type} onClick={() => onClick(item.type)}>
            <span className={[styles.dropdown, isSelect ? styles.selected : ''].join(' ')}>
              <span>{item.title}</span>
              <i className="iconfont icon-arrow" />
            </span>
          </div>
        )
      })}
    </div>
  )
}
